<template>
    <div>
        <div class="col" v-for="(v,i) in data" :key="i">
            <a :href="`/detail?id=${v.courseId}`">
                <div class="main">
                    <div class="imgOut">
                        <img :src="v.bannerFileUrl" alt="" class="">
                    </div>
                    <p class="toGreen">{{v.courseTitle}}</p>
                    <p class="class">共 {{v.learningNum}} 节课 | {{v.participationsCount}} 人报名</p>
                    <p class="green" v-show="Boolean(Number(v.isFree))">免费</p>
                    <p class="orign" v-show="!Boolean(Number(v.isFree))">￥{{v.coursePrice}}<span class="oldCost">￥{{v.discountPrice}}</span>
                        <span class="timeIn">限时钜惠</span></p>
                </div>
            </a>
        </div>
    </div>
</template>

<script>
    import {classMudel} from "../../../api"
    export default {
        name: "classMudol",
        data() {
            return {
                data: []
            }
        },
        props: {
            dataLoad: Object
        },
        created() {
            var dataForClass = new URLSearchParams();
            // console.log(this.dataLoad)
            dataForClass.append('type', this.dataLoad.type)
            dataForClass.append('pageNum', 1)
            dataForClass.append('pageSize', this.dataLoad.pageSize)
            classMudel(dataForClass).then(res=>{
                console.log(res)
                this.data = res.rows
            })
        }
    }
</script>

<style scoped lang="less">
    /*    整体设置 */
    a {
        text-decoration: none;
    }

    /*总体设置*/
    .col {
        width: 239.8px;
        /* background-color: salmon; */
        /* margin: 14px 8px auto; */
        float: left;
        margin-top: 14px;

        a {
            display: block;
            overflow: hidden;
        }

        a:hover {
            text-decoration: none !important;
        }

        a:hover .toGreen {
            color: #00cf8c
        }
    }

    .toGreen {
        color: black;
    }

    /*内容设置*/
    .main {
        margin-left: 8px;
        /*图片*/

        img {
            width: 224px;
            height: 113px;
            text-align: center;
            position: relative;
            transition: all 0.5s;
        }

        img:hover {
            transform: scale(1.1, 1.1);
        }

        /*课程状态*/

        .class {
            color: rgb(150, 150, 150);
        }

        p {
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            margin-bottom: 0px !important;
        }

        /*老价格*/

        .oldCost {
            color: rgb(150, 150, 150);
            text-decoration: line-through;
        }

        /*限时钜惠*/

        .timeIn {
            font-size: 12px;
            color: rgb(250, 140, 22);
            border: 1px solid rgb(250, 140, 22);
            background-color: rgb(255, 213, 145);
            float: right;
            height: 20px;
            line-height: 20px;
            padding: 0px 7px;
            margin-right: 20px;
        }
    }

    .imgOut {
        width: 224px;
        height: 113px !important;
        /*overflow: hidden;*/
        margin-bottom: 6px;
        /* margin: auto; */
        overflow: hidden;
    }

    /*颜色设置,配合传参使用*/
    .green {
        font-size: 18px;
        color: #00cf8c;
    }

    .orign {
        font-size: 18px;
        color: rgb(255, 69, 0);
    }
</style>